<template>
  <div class="">
    <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        width="800px"
        :close-on-click-modal="false"
        @close="close"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="优惠券名称" :required="true">
          <el-input v-model.trim="form.name" autocomplete="off" @input="selectType"></el-input>
          <el-button type="primary" class="mar_l20" @click="selectType">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="tabledata">
        <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe
                  style="width: 100%" @selection-change="setSelectRows">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="优惠券ID"></el-table-column>
          <el-table-column prop="name" label="优惠券名称"></el-table-column>
<!--          <el-table-column prop="createdAt" label="操作">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button type="text" @click="save(scope.row)">发券</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync='page.currentPage'
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="close">取 消</el-button>
        <el-button size="medium" type="primary" @click="save">发 券</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {storeCouponList,sendCoupon} from "@/api/user";
import {goodDel} from "@/api/good";
export default {
  name: "goodlistedit",
  created() {
  },
  data() {
    return {
      form: {
        selectType: "",
      },
      list: [],
      listLoading: false,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      userData:{},
      title: "",
      dialogFormVisible: false,
    }
  },
  components: {
  },
  methods: {
    showEdit(row) {
      this.title = "优惠券列表";
      this.userData = row
      this.fetchData()
      this.dialogFormVisible = true;
    },
    close() {
      this.dialogFormVisible = false;
    },
    // setStoreId(storeId){
    //   this.form.storeId = storeId
    // },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    selectType(){
      this.fetchData();
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    async fetchData() {
      this.listLoading = true;
      const {data, count} = await storeCouponList({page: this.page.currentPage,stoerId:this.stoerId,keyword:this.form.name});
      this.list = data;
      this.page.total = count;
      setTimeout(() => {
        this.listLoading = false;
      }, 100);
    },
    async save() {
      if (this.selectRows.length > 0) {
        const id = this.selectRows.map((item) => item.id);
        const { msg } = await sendCoupon({stoerId:this.stoerId,userId:this.userData.id,couponId:id});
        this.$baseMessage(msg, "success");
        this.$emit("fetchData");
        this.close();
      } else {
        this.$baseMessage('未选中任何行', 'error');
        return false;
      }
    },
  }
};
</script>
